<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <include file="./Apps/WebApp/View/default/common_js.html" />
    <title>Turn.js 实现翻书效果</title>
    <link rel="stylesheet" type="text/css" href="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/css/basic.css"/>
</head>
<body>
<div class="flipbook-viewport">
	<!--<div class="flipbook-viewport">-->
    <div class="previousPage">
    	<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/MemoryCup/RectangleCopy2.png" alt="" />
    </div>
    <div class="nextPage">
    	<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/MemoryCup/RectangleCopy3.png" alt="" />
    </div>
</div>
<!--    <div class="return"></div>-->
   <!-- <img class="btnImg" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/entries/btn.gif" style="display: none"/>-->
    <div class="container">
        <div class="flipbook" style="width: 8.8rem;height: 11.96rem;">
        </div>
    </div>
    <div class="book">
    	<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/MemoryCup/sxas.png" alt="" class="vote"/>
    	<div>
					<span>
						<img src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/images/MemoryCup/Group7Copy2.png" alt="" class="WboxImg"/>
					</span>
					<span class="wb">微博书</span>
				</div>
				<a>作者：某某小天使</a><br />
				<a>创作时间：2018年5月6日</a><br />
				<a>简介：将高中的时光印刷在书中，为当时的校园生活</a><br />
				<a>感到快乐，也为自己平时虚度光阴而羞愧。。</a>
			</div>
    </div>
<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/jisuan.js"></script>
<script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/entries/jquery.js"></script>
    <script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/entries/modernizr.2.5.3.min.js"></script>
    <script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/main.js"></script>
    <script type="text/javascript" src="http://www.youyiku-yishu.cn/Apps/WebApp/View/default/js/entries/turn.js"></script>
<script>
    //自定义仿iphone弹出层
    (function ($) {
        //ios confirm box
        jQuery.fn.confirm = function (title, option, okCall, cancelCall) {
            var defaults = {
                title: null, //what text
                cancelText: '取消', //the cancel btn text
                okText: '确定' //the ok btn text
            };

            if (undefined === option) {
                option = {};
            }
            if ('function' != typeof okCall) {
                okCall = $.noop;
            }
            if ('function' != typeof cancelCall) {
                cancelCall = $.noop;
            }

            var o = $.extend(defaults, option, {title: title, okCall: okCall, cancelCall: cancelCall});

            var $dom = $(this);

            var dom = $('<div class="g-plugin-confirm">');
            var dom1 = $('<div>').appendTo(dom);
            var dom_content = $('<div>').html(o.title).appendTo(dom1);
            var dom_btn = $('<div>').appendTo(dom1);
            var btn_cancel = $('<a href="#"></a>').html(o.cancelText).appendTo(dom_btn);
            var btn_ok = $('<a href="#"></a>').html(o.okText).appendTo(dom_btn);
            btn_cancel.on('click', function (e) {
                o.cancelCall();
                dom.remove();
                e.preventDefault();
            });
            btn_ok.on('click', function (e) {
                o.okCall();
                dom.remove();
                e.preventDefault();
            });

            dom.appendTo($('body'));
            return $dom;
        };
    })(jQuery);

    //上一页
    $(".previousPage").bind("touchend", function () {
        var pageCount = $(".flipbook").turn("pages");//总页数
        var currentPage = $(".flipbook").turn("page");//当前页
        if (currentPage >= 2) {
            $(".flipbook").turn('page', currentPage - 1);
        } else {
        }
    });
    // 下一页
    $(".nextPage").bind("touchend", function () {
        var pageCount = $(".flipbook").turn("pages");//总页数
        var currentPage = $(".flipbook").turn("page");//当前页
        if (currentPage <= pageCount) {
            $(".flipbook").turn('page', currentPage + 1);
        } else {
        }
    });
    //返回到目录页
    $(".return").bind("touchend", function () {
        $(document).confirm('您确定要返回首页吗?', {}, function () {
            $(".flipbook").turn('page', 1); //跳转页数
        }, function () {
        });
    });
</script>
</body>
</html>